/**
 * Web Vitals 性能监控
 * 用于追踪页面核心性能指标
 * 
 * 核心指标：
 * - LCP (Largest Contentful Paint): 最大内容绘制时间
 * - FID (First Input Delay): 首次输入延迟
 * - CLS (Cumulative Layout Shift): 累积布局偏移
 * - FCP (First Contentful Paint): 首次内容绘制
 * - TTFB (Time to First Byte): 首字节时间
 */

/**
 * 报告性能指标
 * @param {Object} metric - 性能指标对象
 */
function sendToAnalytics(metric) {
  // 在生产环境中，将指标发送到分析服务
  if (process.env.NODE_ENV === 'development') {
    console.log('[Web Vitals]', metric)
  }
  
  // 示例：发送到 Google Analytics
  // if (window.gtag) {
  //   window.gtag('event', metric.name, {
  //     value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
  //     event_category: 'Web Vitals',
  //     event_label: metric.id,
  //     non_interaction: true,
  //   })
  // }
}

/**
 * 初始化Web Vitals监控
 */
export function initWebVitals() {
  // 动态导入web-vitals库（需要先安装：npm install web-vitals）
  if ('web-vitals' in window || typeof window !== 'undefined') {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(sendToAnalytics)
      getFID(sendToAnalytics)
      getFCP(sendToAnalytics)
      getLCP(sendToAnalytics)
      getTTFB(sendToAnalytics)
    }).catch((error) => {
      console.warn('Failed to load web-vitals:', error)
    })
  }
}

/**
 * 手动记录自定义性能指标
 * @param {string} name - 指标名称
 * @param {number} value - 指标值
 */
export function reportCustomMetric(name, value) {
  const metric = {
    name,
    value,
    id: `custom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    delta: value,
  }
  
  sendToAnalytics(metric)
}

/**
 * 测量组件渲染时间
 * @param {string} componentName - 组件名称
 * @returns {Function} 结束测量的函数
 */
export function measureRenderTime(componentName) {
  const startTime = performance.now()
  
  return () => {
    const endTime = performance.now()
    const duration = endTime - startTime
    
    reportCustomMetric(`render_${componentName}`, duration)
    
    if (duration > 16) { // 超过一帧（60fps）
      console.warn(`[Performance] ${componentName} took ${duration.toFixed(2)}ms to render`)
    }
  }
}

/**
 * 资源加载性能监控
 */
export function monitorResourceLoading() {
  if (typeof window === 'undefined' || !window.performance) {
    return
  }

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.duration > 1000) { // 加载时间超过1秒
        console.warn(`[Performance] Slow resource: ${entry.name} (${entry.duration.toFixed(2)}ms)`)
        
        reportCustomMetric('slow_resource_load', entry.duration)
      }
    }
  })

  observer.observe({ entryTypes: ['resource'] })
}

/**
 * 监控长任务
 */
export function monitorLongTasks() {
  if (typeof window === 'undefined' || !('PerformanceObserver' in window)) {
    return
  }

  try {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        console.warn(`[Performance] Long task detected: ${entry.duration.toFixed(2)}ms`)
        reportCustomMetric('long_task', entry.duration)
      }
    })

    observer.observe({ entryTypes: ['longtask'] })
  } catch (e) {
    // Long Task API 可能不被支持
    console.warn('Long Task API not supported')
  }
}

// 默认导出所有监控功能
export default {
  initWebVitals,
  reportCustomMetric,
  measureRenderTime,
  monitorResourceLoading,
  monitorLongTasks,
}

